import { getContext } from '/lib/context.js';
import { analyze } from '../lib/analyze.js';

export default {
    props: {
        censorType: String,
        censorTypeOptions: Array,
        isUploading: Boolean,
        isOperating: Boolean,
        censorStatus: String,
        zipFileHash: String
    },
    computed: {
        censorList() {
            const censorTypeInfo = this.$props.censorTypeOptions.find(
                (e) => e.censorType == this.$props.censorType
            );
            if (!censorTypeInfo) {
                return [];
            }
            return censorTypeInfo.censorList;
        },
        censorReport() {
            const censorTypeInfo = this.$props.censorTypeOptions.find(
                (e) => e.censorType == this.$props.censorType
            );
            if (!censorTypeInfo) {
                return;
            }
            return censorTypeInfo.censorReport;
        }
    },
    methods: {
        clickOptionHandler(option) {
            if (this.$props.isOperating) {
                return;
            }
            const context = getContext();
            context.censorType = option.censorType;
        },
        analyze() {
            analyze.call(this);
        },
    },
    /* html */
    template: `
    <div class="censor-type">
        <div class="title">预检目标</div>
        <div class="select-censor-type">
            <div v-for="option in censorTypeOptions" :value="option.censorType"
                v-on:click="clickOptionHandler.call(this, option)"
                :class="['item', censorType == option.censorType && 'selected']">
                <div class="text">{{option.title}}</div>
                <img class="icon" :src="'/assets/' + (option.censorReport ? 'success' : 'magnifying-glass') + '.png'" />
            </div>
        </div>
    </div>
    <div class="censor-result">
        <div class="title">预查结果</div>
        <div v-if="censorReport" class="censor-report board" v-html="censorReport"></div>
        <div v-else class="censor-type-description board">
            <div class="list-title">将预检以下内容</div>
            <div v-if="censorList" class="censor-list">
                <div v-for="item in censorList" class="item">{{ item }}</div>
            </div>
            <div v-if="censorStatus" class="censor-status">
                <div class="title">当前状态：</div>
                <div class="content" v-html="censorStatus"></div>
            </div>
            <div :class="['censor-button', (isUploading || isOperating || !zipFileHash) && 'disabled']">
                <div class="button" v-on:click="analyze">
                    <div class="icon"><img src="/assets/magnifying-glass-white.png" /></div>
                    <div class="text">开始预检</div>
                </div>
            </div>
        </div>
    </div>
    `,
};
